<template>
	<view>
		<view class="richText">
			<rich-text :nodes="defultText"></rich-text>
		</view>
		<view class="tools-text">
			<text>保费信息</text>
		</view>
		<view class="calculator-input">
			<view class="calculator-title">缴费年限:</view>
			<input v-model="jfnx" class="calculator-text" type="number" placeholder="填写缴纳保费的年限" />
			<text class="required">*</text>
		</view>
		<view class="calculator-input">
			<view class="calculator-title">年缴保费:</view>
			<input v-model="njbf" class="calculator-text" type="digit" placeholder="每年保费金额" />
			<text class="required">*</text>
		</view>
		<view class="tools-text">
			<text class="tools-text-zes">收益-现金价值（增额寿）</text>
		</view>
		<view class="calculator-input">
			<view class="calculator-title">保单年度:</view>
			<input v-model="bdnd" class="calculator-text" type="number" placeholder="保单终止时年度" />
		</view>
		<view class="calculator-input">
			<view class="calculator-title">现金价值:</view>
			<input v-model="xjjz" class="calculator-text" type="digit" placeholder="保单终止时现金价值" />
		</view>

		<view class="tools-text">
			<text class="tools-text-nj">收益-现金提取（年金）</text>
		</view>
		<view class="calculator-income">
			<view class="calculator-income-view">
				<view class="calculator-title">起始年度</view>
				<input v-model="qsnd" class="calculator-text" type="number" placeholder="年度" />
			</view>
			<view class="calculator-income-view">
				<view class="calculator-title">终止年度</view>
				<input v-model="zznd" class="calculator-text" type="number" placeholder="年度" />
			</view>
			<view class="calculator-income-view">
				<view class="calculator-title">年提取额</view>
				<input v-model="ntqe" class="calculator-text" type="digit" placeholder="金额" />
			</view>
		</view>

		<view class="calculator-button">
			<button @click="toClear">重置</button>
			<button @click="calculator">计算</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			defultText: '<h3>使用说明：</h3> <p>1、收益录入时，仅允许录入一种收益，不允许同时录入。</p><p>2、按流行的计划书方法计算单利。</p>',
			jfnx: '', //缴费年限
			njbf: '', //年缴保费
			bdnd: '', //保单年度
			xjjz: '', //现金价值
			qsnd: '', //起始年度
			zznd: '', //终止年度
			ntqe: '' //年提取额
		};
	},
	created() {
		//设置分享到微信分享到朋友圈
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	methods: {
		calculator() {
			let sendData = {
				f_jfnx: this.jfnx,
				f_njbf: this.njbf,
				f_bdnd: this.bdnd,
				f_xjjz: this.xjjz,
				f_qsnd: this.qsnd,
				f_zznd: this.zznd,
				f_ntqe: this.ntqe
			};

			if (sendData.f_jfnx == '' || sendData.f_njbf == '') {
				uni.showToast({
					title: '请检查必填项',
					icon: 'error'
				});
			} else if (sendData.f_bdnd == '' && sendData.f_xjjz == '' && sendData.f_qsnd == '' && sendData.f_zznd == '' && sendData.f_ntqe == '') {
				uni.showToast({
					title: '收益不许为空',
					icon: 'error'
				});
			} else if ((sendData.f_bdnd != '' || sendData.f_xjjz != '') && (sendData.f_qsnd != '' || sendData.f_zznd != '' || sendData.f_ntqe != '')) {
				uni.showToast({
					title: '收益请二选一',
					icon: 'error'
				});
			} else if ((sendData.f_bdnd != '' && sendData.f_xjjz == '') || (sendData.f_bdnd == '' && sendData.f_xjjz != '')) {
				uni.showToast({
					title: '收益录入为空',
					icon: 'error'
				});
			} else {
				wx.navigateTo({
					url: '/pages/tools/calculator/result/result?data=' + JSON.stringify(sendData)
				});
			}
		},
		toClear() {
			this.jfnx = '';
			this.njbf = '';
			this.bdnd = '';
			this.xjjz = '';
			this.qsnd = '';
			this.zznd = '';
			this.ntqe = '';
		}
	}
};
</script>

<style lang="stylus">
.tools-text
	margin-left: 10rpx

.calculator-input
	display: flex
	align-items: center;       //垂直居中
	.calculator-title
		height: 70rpx
		margin-right: 20rpx
		margin-top: 40rpx
		margin-left: 50rpx
		font-weight: bold
		font-size: 32rpx
	.required
		color: #ff0000
		margin-left: 10rpx
	.calculator-text
		height: 70rpx
		width: 400rpx
		margin-top: 20rpx
		border: 2px solid #d9d9d9
		border-radius: 5px;
		color: #333;
		text-align: center

.calculator-income
	display: flex
	font-size: 26rpx
	justify-content: center;   //水平居中
	align-items: center;       //垂直居中
	.calculator-income-view
		.calculator-title
			margin-top: 20rpx
			margin-left: 45rpx
			font-weight: bold
		.calculator-text
			height: 70rpx
			width: 160rpx
			margin-top: 20rpx
			margin-left: 20rpx
			border: 2px solid #d9d9d9
			border-radius: 5px;
			color: #333;
			text-align: center

.calculator-button
	display: flex
	justify-content: center;   //水平居中
	align-items: center;       //垂直居中
	margin-top: 30rpx
	button
		width: 350rpx
		background-image: linear-gradient(45deg,#ff4b87,#ff8c8c);
		background-color: #0052d9
		height: 80rpx
		font-size: 28rpx
		font-weight: bold
		color: #fff
		margin-left: 20rpx
		margin-right: 20rpx
		vertical-align: middle
		box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0,0,0,.3);

.tools-text
	text-align: left
	font-size: 36rpx
	font-weight: bold
	line-height: 80rpx
	color: #0052d9
	.tools-text-zes
		color: #ff0000
	.tools-text-nj
		color: #9900ff
.richText
	color: #fff
	margin-top: 20rpx
	padding: 20rpx;
	line-height: 1.5;
	font-size: 26rpx
	font-weight: bold
	background-image: linear-gradient(45deg,#ff4b87,#ff8c8c);
</style>
